<template>
    <div class="page">
        <van-nav-bar
            title="充值成功"
            left-arrow
            fixed
        />

        <img
            class="recharge-success-logo"
            src="../assets/recharge-success-logo.png"
        />

        <div class="recharge-success-title">充值完成</div>
        <div class="recharge-money-title">您已充值（元）</div>
        <div class="recharge-money-info">399.00</div>
        <div class="recharge-success-tips">获得<span> 399积分、月卡VIP </span>权限</div>
        <div class="recharge-success-btn">完成</div>
    </div>
</template>

<script>
export default {
    beforeRouteEnter(to, from, next) {
        // 添加背景色
        window.document.body.style.backgroundColor = '#f6f6f6'
        next()
    },
    beforeRouteLeave(to, from, next) {
        // 去除背景色
        window.document.body.style.backgroundColor = ''
        next()
    }
}
</script>

<style lang="less" scoped>
.page {
    padding-top: 92px;
}

.recharge-success-logo {
    display: block;
    width: 163px;
    height: 163px;
    margin: 72px auto 0 auto;
}

.recharge-success-title {
    font-weight: 500;
    font-size: 37px;
    color: #2f318b;
    text-align: center;
    margin-top: 36px;
}

.recharge-money-title {
    font-weight: 500;
    font-size: 27px;
    color: #909090;
    text-align: center;
    margin-top: 42px;
}

.recharge-money-info {
    font-weight: 600;
    font-size: 82px;
    color: #262626;
    text-align: center;
    margin-top: 20px;
}

.recharge-success-tips {
    font-weight: 500;
    font-size: 24px;
    color: #262626;
    text-align: center;
    margin-top: 28px;
    span {
        color: #e62129;
    }
}

.recharge-success-btn {
    width: 540px;
    height: 99px;
    line-height: 99px;
    text-align: center;
    font-weight: 500;
    font-size: 32px;
    color: #fff;
    background-color: #e62129;
    border-radius: 49px;
    margin: 44px auto 0 auto;
}
</style>